<template>
  <div class="page flex-col">
    <div class="box_1 flex-col">
      <Navbar class="navbar"/>
      <div class="main-content flex-row">
        <Sidebar class="sidebar"/>
        <div class="router-view-container flex-row">

          <div class="clean-flex">
            <!-- 页面标题 -->
            <div class="page-header">
              <h1 class="page-title">{{ pageTitle }}</h1>
            </div>

            <RouterView class="router-view"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Sidebar from "@/layout/Sidebar.vue";
import Navbar from "@/components/Navbar.vue";
import {RouterView} from "vue-router";
import {ref, watch} from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute()
const pageTitle = ref('')

watch(
    () => route.meta,
    (meta) => {
      pageTitle.value = meta.title
    },
    {immediate: true}
)

</script>

<style scoped>
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.clean-flex {
  width: 100%;
  height: 100%;
}

.page {
  position: relative;
  height: 98vh;
  width: 99vw;
  min-width: 1920px;
  min-height: 1080px;
  overflow: hidden;
}

.box_1 {
  background-color: rgba(243, 242, 249, 1);
  position: relative;
  width: 100%;
  height: 100%;
}

.navbar {
  width: 100%;
  height: 195px;
}

.main-content {
  width: 100%;
  height: calc(100% - 100px); /* 小于Navbar 高度 */
  margin: -104px 0 0 35px;
}

.sidebar {
  width: 230px;
  height: 100%;
}

.router-view-container {
  width: calc(100% - 330px);
  margin-left: 30px;
  padding: 0;
  overflow: hidden;
}

.router-view {
  height: calc(100% - 60px);
  width: 100%;
  border-radius: 0 15px 15px 15px;
  padding: 30px 30px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

/* 页面标题容器 */
.page-header {
  background-color: rgba(255, 255, 255, 1);
  padding: 0 15px;
  align-content: center;
  border-radius: 20px 85px 0 0;
  clip-path: polygon(0 0, 80% 0, 100% 102%, 0 102%);
  box-sizing: border-box;
  height: 45px;
  width: 150px;
}


/* 页面标题 */
.page-title {
  color: rgba(231, 59, 69, 1);
  font-size: 22px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  margin: 0; /* 移除外边距 */
  line-height: 25px;
}
</style>

